<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
<h4 mouse-over-leave hover="hover">测试一下 <span ng-show="hover">显示内容</span></h4>
<h4 mouse-over-leave hover="hover">测试一下 <span ng-show="hover">显示内容</span></h4>
</body>
</html>
<script>
    var myApp = angular.module('myApp', []);
    myApp.directive('mouseOverLeave', function(){
        return {
            restrict: 'A',
            scope: {
                hover: "="
            },
            link: function(scope, elem, attr){
                elem.bind('mouseover', function(){
                    elem.css("cursor", "pointer");
                    scope.$apply(function(){
                        scope.hover = true;
                    });
                });
                elem.bind('mouseleave', function(){
                    scope.$apply(function(){
                        scope.hover = false;
                    });
                });
            }
        }
    });
</script>